<template>
  <div class="custom-query">
    <el-scrollbar class="group-list custom-scroll" style="height: 600px">
      <custom-query-group
        v-for="(group, index) in groupList"
        :key="index"
        :fieldList="dialogParams.fieldList"
        :dictList="dialogParams.dictList"
        :getDictDataList="getDictDataList"
        :historyList="queryHistoryList"
        :value="group"
        @input="val => updateGroup(group, val)"
        @add="addGroup"
        @delete="removeGroup(group)"
      />
    </el-scrollbar>
    <div class="btn-group">
      <span style="font-size: 14px; padding-right: 10px">历史查询记录</span>
      <el-select
        v-model="currentHistory"
        :size="defaultFormItemSize"
        placeholder="历史查询记录"
        style="width: 250px"
      >
        <el-option-group label="历史查询记录(最多10条)" v-if="queryHistoryList.length > 0">
          <el-option
            v-for="item in queryHistoryList"
            :key="item.id"
            :label="item.name"
            :value="item.data"
          />
        </el-option-group>
      </el-select>
      <div style="flex: 1"></div>
      <el-button :plain="true" :size="defaultFormItemSize" @click="cancel">取消</el-button>
      <el-button :plain="true" type="primary" :size="defaultFormItemSize" @click="reset">
        重置
      </el-button>
      <el-button type="primary" :size="defaultFormItemSize" @click="submit">查询</el-button>
    </div>
  </div>
</template>

<script>
import CustomQueryGroup from './CustomQueryGroup.vue';
import thirdPartyMixin from '@/views/thirdParty/thirdPartyMixin.js';

export default {
  name: 'CustomQuery',
  props: {
    data: {
      type: Array
    },
    dictList: {
      type: Array
    },
    fieldList: {
      type: Array
    },
    getDictDataList: {
      type: Function
    },
    customQueryHistory: {
      type: Array
    }
  },
  mixins: [thirdPartyMixin],
  components: {
    CustomQueryGroup
  },
  data() {
    return {
      groupList: [],
      currentHistory: undefined
    };
  },
  computed: {
    dialogParams() {
      return {
        data: this.data || this.thirdParams.data || [],
        dictList: this.dictList || this.thirdParams.dictList || [],
        fieldList: this.fieldList || this.thirdParams.fieldList || [],
        customQueryHistory: this.customQueryHistory || this.thirdParams.customQueryHistory || []
      };
    },
    queryHistoryList() {
      return this.dialogParams.customQueryHistory.map(item => {
        return {
          name: item.name,
          data: JSON.parse(item.data)
        };
      });
    }
  },
  methods: {
    updateGroup(group, val) {
      const index = this.groupList.findIndex(item => item === group);
      this.groupList.splice(index, 1, val);
    },
    addGroup() {
      this.groupList.push({
        id: new Date().getTime(),
        logicOperator: this.LogicOperatorType.AND,
        filterList: [
          {
            tableName: undefined,
            columnName: undefined,
            valueType: this.CustomQueryFilterValueType.FIXED,
            filterType: this.CriteriaFilterType.EQ,
            logicOperator: this.LogicOperatorType.AND,
            filterItemValue: ''
          }
        ]
      });
    },
    removeGroup(group) {
      if (this.groupList.length === 1) {
        this.reset();
      } else {
        const index = this.groupList.findIndex(item => item === group);
        this.groupList.splice(index, 1);
      }
    },
    submit() {
      if (this.observer.cancel) {
        this.observer.cancel(true, this.groupList);
      } else {
        this.onCloseThirdDialog(
          true,
          this.thirdParams.path,
          this.dialogParams.data,
          this.groupList
        );
      }
    },
    reset() {
      this.groupList = [];
      this.addGroup();
    },
    cancel() {
      if (this.observer && this.observer.cancel) {
        this.observer.cancel(false);
      } else {
        this.onCloseThirdDialog(false);
      }
    }
  },
  watch: {
    queryHistoryList: {
      handler(val) {
        setTimeout(() => {
          if (Array.isArray(val) && val.length > 0) {
            this.currentHistory = val[0].data;
            console.log('queryHistoryList', this.groupList);
          } else {
            this.currentHistory = undefined;
          }
        }, 30);
      },
      deep: true,
      immediate: true
    },
    currentHistory: {
      handler(val) {
        if (val == null || val.length === 0) {
          this.addGroup();
        } else {
          this.groupList = val;
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.custom-query {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #ffff;
}

.group-list {
  flex-grow: 1;
  flex-shrink: 0;
  height: 100px;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 15px;
}
</style>
